<template>
	<block>
		<view class="grid">
				<view class="grid_item media" @click.stop="toTargetMedia(item)"  v-for="(item, index) in gridDatas">
					<view class="grid-image"><XJImage :value="item.image"></XJImage></view>
					<view class="twoline-hide">{{ item.name }}</view>
					<view class="media_body">
						<view class="media_source">{{ item.source }}</view>
						<Plays :countPlays="item.plays"></Plays>
					</view>
				</view>
		</view>
	</block>
</template>

<script>
import Constants from '@/constants';
import MediaApi from '@/api/media/media.js';
import XJImage from '@/pages/components/xj_image/xj_image.vue';
import Plays from '@/pages/components/count/plays.vue';
export default {
	//
	name: 'media',
	//
	mixins: [Constants],
	//
	components: {
		XJImage,
		Plays
	},
	//
	data() {
		return {};
	},
	//
	props: {
		//
		targetPage: {
			type: String,
			default: ''
		},
		//
		gridDatas: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	//
	methods: {
		toTargetMedia(item) {
			if (item) {
				MediaApi.play(item.id).then(result => {
					if (result.success) {
						let toTargetPage = this.targetPage;
						if (!toTargetPage) {
							toTargetPage = this.pages.mediaOutsidePage;
						}
						this.$app.navTo(toTargetPage, {
							videoUrl: encodeURIComponent(item.storage)
						});
					}
				});
			} else {
				this.$app.toast('参数出错：' + item);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
		place-items: center;
	
		.grid_item {
			width: 100%;
		}
	}
.media {
	background: #fff;
	border-radius: 0.5rem;
	padding: 12rpx;
	.media_body {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		margin-top: 12rpx;
		margin-bottom: 6rpx;
		.media_source {
			font-size: 28rpx;
			border-width: 1rpx;
			border-style: solid;
			--tw-border-opacity: 1;
			border-color: rgba(209, 213, 219, var(--tw-border-opacity));
			border-radius: 0.5rem;
			padding: 6rpx 18rpx;
		}
	}
}
</style>
